<template>
  <span :class="qualityClass" class="quality-text">
    <slot>{{ text }}</slot>
  </span>
</template>

<script>
export default {
  name: 'QualityText',
  props: {
    // 品阶等级，1-5对应不同颜色
    quality: {
      type: [Number, String],
      default: 1,
      validator(value) {
        const num = parseInt(value)
        return num >= 1 && num <= 5
      }
    },
    // 显示的文本内容（可选，也可以使用slot）
    text: {
      type: String,
      default: ''
    },
    // 是否加粗显示
    bold: {
      type: Boolean,
      default: false
    },
    // 自定义大小
    size: {
      type: String,
      default: 'normal', // normal, small, large
      validator(value) {
        return ['small', 'normal', 'large'].includes(value)
      }
    }
  },
  computed: {
    qualityClass() {
      const quality = parseInt(this.quality)
      const classes = ['quality-text']
      
      // 品阶颜色类
      switch (quality) {
        case 1:
          classes.push('quality-1')
          break
        case 2:
          classes.push('quality-2')
          break
        case 3:
          classes.push('quality-3')
          break
        case 4:
          classes.push('quality-4')
          break
        case 5:
          classes.push('quality-5')
          break
        default:
          classes.push('quality-1')
      }
      
      // 加粗样式
      if (this.bold) {
        classes.push('quality-bold')
      }
      
      // 大小样式
      classes.push(`quality-${this.size}`)
      
      return classes.join(' ')
    }
  }
}
</script>

<style scoped>
.quality-text {
  display: inline;
  transition: all 0.2s ease;
}

/* 品阶颜色定义 */
.quality-1 {
  color: #ffffff; /* 白色 - 1品阶 */
}

.quality-2 {
  color: #00ff00; /* 绿色 - 2品阶 */
}

.quality-3 {
  color: #0080ff; /* 蓝色 - 3品阶 */
}

.quality-4 {
  color: #f44336; /* 红色 - 4品阶 */
}

.quality-5 {
  color: #FF9800; /* 橙色 - 5品阶 */
}

/* 加粗样式 */
.quality-bold {
  font-weight: bold;
}

/* 大小样式 */
.quality-small {
  font-size: 12px;
}

.quality-normal {
  font-size: 14px;
}

.quality-large {
  font-size: 16px;
}

/* 悬停效果 */
.quality-text:hover {
  text-shadow: 0 0 4px currentColor;
  transform: scale(1.05);
}

/* 针对不同背景的适配 */
.quality-1 {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.quality-2 {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.quality-3 {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.quality-4 {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.quality-5 {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}
</style>